<template>
  <div class="echarts" ref="mapChart" @dblclick="revertMap" />
</template>
<script>

import areaMaps from '@/utils/map_utils'
import * as echarts from 'echarts'
import ZJJson from '@/assets/mapJson/zhejiang.json'
export default {
  name: "echartsMapZJ",
  
  data() {
    return {
      mapChart: null,
      allScatterData: [
        {
          name: '经济较发达',
          color: 'pink',
          chirdren: [
            {name: '宁波市', value: [121.62454,29.860258]},
            {name: '温州市', value: [120.699279,27.993849]},
          ]
        },
        {
          name: '省会',
          color: 'hotpink',
          chirdren: [
            {name: '杭州市', value: [119.047,29.856]},
          ]
        }
      ]
    };
  },
  methods: {
    initMap () {
      this.mapChart && this.mapChart.dispose()
      this.mapChart = null
      this.mapChart = echarts.init(this.$refs.mapChart)
      echarts.registerMap('ZJ', ZJJson)
      const initOption = {
        geo:{
          map:'ZJ',
          roam:true,
          zoom: 1,
          scaleLimit: {
            min: 1,
            max: 2
          },
          label:{
            show: true,
            formatter: function (params) {
              return `{name|${params.name}}`;
            },
            rich:{
              name:{
                color:'#fff',
                padding:[3,3],
                borderWidth:1,
                borderColor:'#fff'
              }
            },
            fontWeight: "normal",
            fontSize: 12,
            color: "#fff"
          },
          emphasis: {
            label: {
              color: "#FFFFFF"
            },
            itemStyle: {
              areaColor: "#008affaa",
            },
          },
          itemStyle: {
            borderWidth: 1, //边际线大小
            borderColor: "#00fff6", //边界线颜色
            areaColor:'#015ab6',
          },
          // 地图点击过后的样式
          select:{
            itemStyle:{
              areaColor: "#008affaa"
            }
          }
        }
      }
      this.mapChart.setOption(initOption)
      this.$nextTick(() => {
        this.updateChart()
      })
    },
    updateChart () {
      const legendData = this.allScatterData.map(item => item.name)
      const seriesData = this.allScatterData.map(item => {
        return {
          name: item.name,
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: item.chirdren,
          // 中心点也可以使用symbol指定自定义图片
          // symbol: `image://${require('../../assets/images/chengWarning.png')}`,
          // symbolSize: 30,
          rippleEffect: {
            scale: 8,
            brushType: 'stroke',
            number: 3,
          },
          // 散点样式
          itemStyle: {
            color: item.color
          }
        }
      })
      const pathData = [
        {
          type: 'lines',
          coordinateSystem: 'geo',
          data: [
            {
              coords: [
                [120.086881,30.894178],
                [119.923249,28.467694]
              ],
            },
            {
              coords: [
                [120.086881,30.894178],
                [118.859307,28.970229]
              ],
            },
          ],
          lineStyle: {
            curveness: 0.2,
            color: 'orange',
            width: 1.5
          },
          zlevel: 1,
          effect: {
            period: 6,
            show: true,
            color: 'pink',
            trailLength: 0,
            symbol: 'arrow',
            symbolSize: 8
          },
          symbol: 'circle'
        },
        {
          type: 'lines',
          coordinateSystem: 'geo',
          data: [
            {
              coords: [
                [120.086881,30.894178],
                [120.582886,30.051549]
              ],
            }
          ],
          lineStyle: {
            curveness: 0.2,
            color: 'yellow',
            width: 1.5
          },
          zlevel: 1,
          effect: {
            period: 10,
            show: true,
            color: 'gray',
            trailLength: 0,
            symbol: 'triangle',
            symbolSize: 8
          },
          // 在特定情况下，也可以用这种类型的symbol表现出柱状图的形式（宽高根据数据决定）
          symbol: 'roundRect',
          symbolSize: [20,20]
        }
      ]
      for (let i = 0; i < pathData.length; i++) {
        seriesData.push(pathData[i])
      }
      const dataOption = {
        series: seriesData,
        legend: {
          data: legendData,
          textStyle: {
            color: '#fff'
          }
        }
      }
      this.mapChart.setOption(dataOption)
    },
    revertMap () {
      // 如果是浙江地图，不触发双击事件
      if (this.mapChart._model.option.geo[0].map === 'ZJ') return
      echarts.registerMap('ZJ', ZJJson)
      // 回到浙江省地图时展示涟漪散点和图例
      const seriesData = this.allScatterData.map(() => {
        return {
          coordinateSystem: 'geo',
        }
      })
      const revertOption = {
        geo: {
          map: 'ZJ',
          center: undefined,
          zoom: 1
        },
        series: seriesData,
        legend: {
          show: true
        }
      }
      this.mapChart.setOption(revertOption)
    }
  },

  mounted () {
    this.initMap()
    this.mapChart.on('click', params => {
      const currentItem = areaMaps.find(item => item.label === params.name)
      if (!currentItem) return
      const cityJSON = currentItem.mapJson
      const cityName = currentItem.label
      echarts.registerMap(cityName, cityJSON)
      // 下钻时隐藏涟漪散点和图例
      const seriesData = this.allScatterData.map(() => {
        return {
          coordinateSystem: '',
        }
      })
      const changeOption = {
        geo: {
          map: cityName,
          center: undefined,
          zoom: 1
        },
        series: seriesData,
        legend: {
          show: false
        }
      }
      this.mapChart.setOption(changeOption)
    })
  }
};
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 100%;
  margin: auto;
  background-color: #1b1a1a;
}

</style>